

  <template>
  <div class="bf-commont-template news-content">
    <!-- <div style="padding: 0 16px ;">
      <h3>通告发布</h3>
      <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
      <p>生成代码对应的 vue 文件路径：D:\Zmyitem\vue-element-admin\src\beneform4j\view\admin\news\add\index.vue</p>
      <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
    </div> -->

    <div class="edit-setting float-l">

      <div class="setting-input shadow-r">
        <div class="clearfix toggle-nav">
          <div class="float-l" :class="activeName2=='1'?'active':''" @click="activeName2='1';activeTabChange">机构</div>
          <div class="float-l" :class="activeName2=='2'?'active':''" @click="activeName2='2';activeTabChange">用户</div>
          <div class="float-l" :class="activeName2=='3'?'active':''" @click="activeName2='3';activeTabChange">常用组</div>
        </div>
        <div class="input-border-b toggle-content">
          <div v-show="activeName2=='1'">
            <bf-org
              ref="orgRef"
              :showCheckbox="true"
              :showChecked="checkedOrgId"
              @checkChange="checkChangeOrg"
            ></bf-org>
            <div class="text-c color org-add" @click="addOrgGroup">
              <!-- <i class="fa fa-plus"></i> <span>添加为常用组</span> -->
            </div>
          </div>
          <div v-show="activeName2=='2'">
            <bf-org
              :showCheckbox="true"
              :userOrg="true"
              :showChecked="checkedUserId"
              @checkChange="checkChangeUser"
            ></bf-org>
            <div class="text-c color org-add">
              <!-- <i class="fa fa-plus"></i> <span>添加为常用组</span> -->
            </div>
          </div>
          <div v-show="activeName2=='3'">
            31
          </div>
        </div>


      </div>
    </div>
    <div class="edit-content float-l">
      <div class="top-des-title">
        <span class="bar-l"></span><span>通告发布内容</span>
      </div>
      <div class="content-input">
        <el-form class="form-container input-border-b " :rules="rules" :model="ruleForm" ref="postForm">
          <div>
            <el-form-item style="margin-bottom: 20px;" label-width="110px" label="通告模板类型"  prop="msgType">
              <el-select v-model="ruleForm.msgType" placeholder="请选择活动区域">
                <el-option label="放假通知" value="1"></el-option>
                <el-option label="福利发放" value="2"></el-option>
                <el-option label="行政处罚" value="3"></el-option>
                <el-option label="通用通知" value="4"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="margin-bottom: 20px;" label-width="100px" label="接收人/机构:"  prop="user" >
              <el-input :disabled='true' type="textarea" class="article-textarea" :rows="1" autosize placeholder="请在左侧选择用户/机构" v-model="ruleForm.user">
              </el-input>
            </el-form-item>

            <el-form-item style="margin-bottom: 20px;" label-width="100px" label="通告的标题:" prop="msgTitle">
              <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="ruleForm.msgTitle">
              </el-input>
            </el-form-item>

            <div class="editor-container">
              <tinymce :height=400 ref="editor" v-model="ruleForm.content"></tinymce>
            </div>
          </div>
        </el-form>
        <div>
          <div class="submit-action">
            <el-button type="primary" @click="sendNews">发布</el-button>
            <el-button>保存草稿</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 发布消息 -->
    <bf-table-edit :title="'发布消息'" :editForm='setting' ref='editRef' @formSubmit='editSubmit' :editRules="rules"></bf-table-edit>
  </div>
</template>

<script>
import request from '@/utils/request'
import { getListApi, editItemApi, deleteItemApi, addItemApi, backEditItemApi } from './api'
import { setting, rule } from './setting'
import MDinput from '@/components/MDinput'
import Tinymce from '@/components/Tinymce'
export default {
  components: { MDinput, Tinymce },
  data() {
    return {
      activeName2: '1',
      rules: {
        effectiveFlag: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        effectiveStartDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        effectiveEndDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        msgLevel: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        msgTitle: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        user: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        msgType: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      ruleForm: {
        user: '',
        content: '',
        msgTitle: '',
        msgType: ''
      },
      checkedOrgId: [],
      checkedUserId: [],
      searchData: '',
      listData: {
      },
      checkedData: [],
      rowAction: [
        {
          label: '详情',
          click: (item) => {
            this.$refs.detailRef.show(item.scope.row)
          }
        },
        {
          label: '编辑',
          click: (item) => {
            this.$refs.editRef.show(item.scope.row)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$confirm('删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              })
            })
          }
        }
      ],
      setting: setting,
      itemInfoData: {},
      editRules: rule}
  },
  mounted: function() {
    let id = this.$route.query.id
    if (id) {
      this.searchList(id)
    }
  },
  methods: {
    activeTabChange() {

    },
    sendNews() {
      this.$refs.postForm.validate((valid)=>{})

      if (!this.ruleForm.msgType) {
        this.$message({
          type: 'error',
          message: '请输入通告模板类型'
        })
        return
      }
      if (!this.ruleForm.user) {
        this.$message({
          type: 'error',
          message: '请先选择通告接收人'
        })
        return
      }
      if (!this.ruleForm.msgTitle) {
        this.$message({
          type: 'error',
          message: '请输入通告标题'
        })
        return
      }
      if (!this.ruleForm.content) {
        this.$message({
          type: 'error',
          message: '请输入通告内容'
        })
        return
      }

      this.$refs.editRef.show({})
    },
    checkChangeOrg(data, checked) {
      // console.log(checked.checkedNodes)
      let checkOrgStr = ''
      this.checkedOrgId = []
      checked.checkedNodes.forEach((v,i) => {
        if (i == checked.checkedNodes.length -1) {
          checkOrgStr += v.text
        } else {
          checkOrgStr += v.text + ' , '
        }
        this.checkedUserId = []
        this.checkedOrgId.push(v.id)
      })
      this.ruleForm.user = checkOrgStr

    },
    checkChangeUser(data, checked) {
      // console.log(checked.checkedNodes)
      let checkOrgStr = ''
      checked.checkedNodes.forEach((v,i) => {
        if (v.isEmployee == '0') {
          return
        }
        checkOrgStr += v.text + ' , '
        this.checkedOrgId = []
        this.checkedUserId.push(v.id)
      })
      this.ruleForm.user = checkOrgStr.slice(0,checkOrgStr.length-2)
    },
    addOrgGroup() {
      // debugger
      // this.checkedData = this.$refs.orgRef.checkedData
      // this.ruleForm.title = 'hello'
    },
    searchList(id) {
      getListApi(id).then(response => {
        if (response.success) {
          this.itemInfoData = response.data
          this.ruleForm.content = response.data.msgContent
          this.ruleForm.msgTitle = response.data.msgTitle
          this.ruleForm.msgType = response.data.msgType
          this.checkedOrgId = response.data.recvNet
          this.checkedUserId = response.data.recvOper
          if (response.data.employeeName) {
            this.activeName2 = '2'
            this.ruleForm.user = response.data.employeeName
          }
          if (response.data.orgName) {
            this.activeName2 = '1'
            this.ruleForm.user = response.data.orgName
          }
        }
      })
    },
    editSubmit(form) { // 编辑提交
      let recvNet = ''
      let recvOper = ''
      this.checkedOrgId.forEach(v => {
        recvNet += v+','
      })
      this.checkedUserId.forEach(v => {
        recvOper += v+','
      })
      if (form.effectiveFlag == '1') {
        form.effectiveEndDate = ''
        form.effectiveStartDate = ''
      }
      let params = {
        effectiveEndDate: form.effectiveEndDate,
        effectiveFlag: form.effectiveFlag,
        effectiveStartDate: form.effectiveStartDate,
        msgLevel: form.msgLevel,
        recvNet: recvNet,
        recvOper: recvOper,
        msgContent: this.ruleForm.content,
        msgTitle: this.ruleForm.msgTitle,
        msgType: this.ruleForm.msgType,
        status: '1'
      };
      if (this.$route.query.id) {
        // params.id = this.$route.query.id
        // params.taskId = this.itemInfoData.taskId
        let params = Object.assign(this.itemInfoData,params)
        backEditItemApi(params).then(response =>{
          if (response.success) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$refs.editRef.hiden()
          }
        })
      } else {
        addItemApi(params).then(response =>{
          if (response.success) {
            this.$message({
              type: 'success',
              message: '新增成功'
            })
            this.$refs.editRef.hiden()
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.bf-commont-template{
  position: relative;
  overflow: hidden;
}

.bf-commont-template>div>div{
  padding: 16px;
}
.setting-input{
  min-height: 600px;
}
.edit-content{
  width: 80%;
}
.edit-setting{
  width: 20%;
}
.org-add{
  cursor: pointer;
}
.toggle-nav>div{
  width: 33.33%;
  text-align: center;
  padding: 10px 0 ;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.toggle-nav>div:last-child{
  border-right: 1px solid #eee;
}
.toggle-nav>.active{
  border-bottom: none;
}
.toggle-content{
  border: 1px solid #eee;
  border-top: none;
}
.toggle-content>div{
  padding: 10px;
  min-height: 670px;
}
.org-add{
  margin-top: 16px;
}
.submit-action{
  width: 200px;
  margin: 0 auto;
  margin-top: 20px;
}
.top-des-title{
  border-bottom: 1px dotted #eee;
}
.bf-commont-template .top-des-title{
  padding: 16px 0;
  margin: 0 16px;
}
</style>
